<template>
  <el-drawer title="模版查看" :visible.sync="visible" :with-header="false" size="650px">
    <div class="right-container">
      <div class="container-header">
        <div style="font-size: 14px">模版查看</div>
        <div @click="handleClose">
          <i class="el-icon-close" style="font-size: 18px"></i>
        </div>
      </div>
      <div class="container-content background-color-grey padding-10">
        <div class="bg-white border-radius">
          <div class="padding-lg flex ">
            <div class="flex-1">短信类型： <span v-if="manageItem.type == 0">验证码短信</span>
              <span v-else-if="manageItem.type == 1">通知短信</span>
              <span v-else-if="manageItem.type == 2">推广短信</span>
              <span v-else-if="manageItem.type == 3">国际/港澳台短信</span>
              <span v-else-if="manageItem.type == 7">数字短信</span></div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">模板编号：{{manageItem.modelCode}}</div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">模板名称：{{manageItem.modelName}}</div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">短信内容：{{manageItem.modelName}}</div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">发送时间：{{manageItem.createTime}}</div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">发送状态：{{manageItem.status==1?"已发送":"未发送"}}</div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">短信备注：{{manageItem.remark}}</div>
          </div>
        </div>
      </div>
    </div>

  </el-drawer>
</template>

<script>

export default {
  data() {
    return {
      manageItem: {
        name: '',
        studyName: ''
      },
      examMain: {
      },
      dataListLoading: false,
      tableHeaderStyle: { background: '#f5f7fa !important', height: '20px !important', padding: '4px !important' },
      direction: 'rtl',
      visible: false,
      dataList:[]
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {
    handleClose() {
      this.visible = false; // 关闭外层 Drawer 时不关闭内层 Drawer
    },

    init(manageItem) {
      console.log(manageItem);
      this.manageItem = manageItem;
      this.visible = true;
    },
  }
}
</script>
<style>
.right-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container-header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px
}

.container-content {
  flex: 1;
}


.flex-container {
  display: flex;
  justify-content: space-between;
  /* 根据需要调整 */
}

.flex-item {
  flex: 1;
  /* 可以根据需要调整比例 */
  margin: 0 10px;
  /* 添加一些间距 */
}

.left-panel,
.right-panel {
  /* 在这里添加任何特定的样式，比如背景色、边框等 */
}

.el-tabs--border-card>.el-tabs__content {
  padding: 10px 0;
}
</style>
